import React, { useState } from 'react';
import { Divider, Popover, Switch, Input, Select, Layout, Button, InputNumber, Alert } from 'antd';
const { Header, Sider, Content } = Layout;
import './Layoutsetings.scss';
import { SketchPicker } from 'react-color';
import Icon from '/@/components/icon';
import { useStateThemeConfig, useDispatchTheme } from '/@/store/hooks/theme';
import classnames from 'classnames';
import commonFunction from '/@/uilts/commonFunction';
import { t } from 'i18next';
export default function LayoutConfig({ onOpenClose }: any) {
  const ThemeConfig = useStateThemeConfig();
  const { copyText } = commonFunction();
  //主题颜色
  const [Primarycolor, setPrimarycolor] = useState<string>(ThemeConfig.primary);
  const [clicked, setClicked] = useState(false);
  const PrimarycolorChange = (open: boolean) => {
    setClicked(open);
  };
  //顶部背景颜色
  const [topBarcolor, settopBarcolor] = useState<string>(ThemeConfig.topBar);
  const [topBarclicked, settopBarclicked] = useState(false);
  const topBarcolorChange = (open: boolean) => {
    settopBarclicked(open);
  };
  //顶部默认字体颜色
  const [topBarFontSizecolor, settopBarFontSizecolor] = useState<string>(ThemeConfig.topBarFontSizecolor);
  const [FontSizecolorclicked, setFontSizecolorclicked] = useState(false);
  const topBarFontSizecolorChange = (open: boolean) => {
    setFontSizecolorclicked(open);
  };
  //菜单背景色
  const [menuBar, setmenuBar] = useState<string>(ThemeConfig.menuBar);
  const [menuBarclicked, setmenuBarclicked] = useState<boolean>(false);
  const menuBarChange = (open: boolean) => {
    setmenuBarclicked(open);
  };
  //菜单默认字体颜色
  const [menuBarColor, setmenuBarColor] = useState<string>(ThemeConfig.menuBarColor);
  const [menuBarColorclicked, setmenuBarColorclicked] = useState(false);
  const menuBarColorChange = (open: boolean) => {
    setmenuBarColorclicked(open);
  };
  const Dispatch = useDispatchTheme();
  //布局切换
  const LayoutSwitch = (type: string) => {
    Dispatch.stateSetThemeConfig('setthemeConfig', { layout: type });
    onOpenClose(false);
  };
  // 一键复制配置
  const onCopyConfigClick = () => {
    let copyThemeConfig = localStorage.getItem('themeConfig');
    copyText(JSON.stringify(copyThemeConfig)).then(() => {
      onOpenClose(false);
    });
  };
  // 一键恢复默认
  const onResetConfigClick = () => {
    localStorage.clear();
    window.location.reload();
  };
  return (
    <div>
      {/* 主题设置 */}
      <Divider orientation='left' plain>
        {t('layout.setings.globalthemes')}
      </Divider>
      <div className='layout—breadcrumb-seting-bar-flex'>
        <div className='layout-breadcrumb-seting-bar-flex-label'>{t('layout.setings.primary')}</div>
        <div className='layout-breadcrumb-seting-bar-flex-value'>
          <Popover
            placement='bottomRight'
            title={t('layout.setings.colorselector')}
            open={clicked}
            onOpenChange={PrimarycolorChange}
            content={
              <>
                <SketchPicker
                  color={Primarycolor}
                  onChange={(colorObj) => {
                    setPrimarycolor(colorObj.hex);
                  }}
                />
                <div style={{ marginTop: '10px', display: 'flex', justifyContent: 'flex-end' }}>
                  <Button
                    size='small'
                    onClick={() => {
                      setClicked(false);
                      Dispatch.stateSetThemeConfig('setthemeConfig', { primary: Primarycolor });
                    }}
                  >
                    {t('app.determine')}
                  </Button>
                </div>
              </>
            }
            trigger='click'
          >
            <div className='picker'>
              <span className='picker-color' style={{ background: Primarycolor }}>
                <Icon icon='DownOutlined' style={{ color: '#fff', fontSize: '12px' }}></Icon>
              </span>
            </div>
          </Popover>
        </div>
      </div>
      <div className='layout—breadcrumb-seting-bar-flex mt15'>
        <div className='layout-breadcrumb-seting-bar-flex-label'>{t('layout.setings.darkmode')}</div>
        <div className='layout-breadcrumb-seting-bar-flex-value'>
          <Switch
            defaultChecked={ThemeConfig.isIsDark}
            onClick={(checked: boolean) => {
              const body = document.documentElement as HTMLElement;
              if (checked) body.setAttribute('data-theme', 'dark');
              else body.setAttribute('data-theme', '');
              Dispatch.stateSetThemeConfig('setthemeConfig', { isIsDark: checked });
            }}
            size='small'
          />
        </div>
      </div>
      <div className='layout—breadcrumb-seting-bar-flex mt15'>
        <div className='layout-breadcrumb-seting-bar-flex-label'>{t('layout.setings.mourningmode')}</div>
        <div className='layout-breadcrumb-seting-bar-flex-value'>
          <Switch
            defaultChecked={ThemeConfig.IsGreyMode}
            onClick={(checked: boolean) => {
              Dispatch.stateSetThemeConfig('setthemeConfig', { IsGreyMode: checked });
            }}
            size='small'
          />
        </div>
      </div>

      {/* 顶栏设置 */}
      <Divider orientation='left' plain>
        {t('layout.setings.topbarsettings')}
      </Divider>
      <div className='layout—breadcrumb-seting-bar-flex'>
        <div className='layout-breadcrumb-seting-bar-flex-label'>{t('layout.setings.topbarbackground')}</div>
        <div className='layout-breadcrumb-seting-bar-flex-value'>
          <Popover
            placement='bottomRight'
            title={t('layout.setings.colorselector')}
            open={topBarclicked}
            onOpenChange={topBarcolorChange}
            content={
              <>
                <SketchPicker
                  color={topBarcolor}
                  onChange={(colorObj) => {
                    settopBarcolor(colorObj.hex);
                  }}
                />
                <div style={{ marginTop: '10px', display: 'flex', justifyContent: 'flex-end' }}>
                  <Button
                    size='small'
                    onClick={() => {
                      settopBarclicked(false);
                      Dispatch.stateSetThemeConfig('setthemeConfig', { topBar: topBarcolor });
                    }}
                  >
                    {t('app.determine')}
                  </Button>
                </div>
              </>
            }
            trigger='click'
          >
            <div className='picker'>
              <span className='picker-color' style={{ background: topBarcolor }}>
                <Icon icon='DownOutlined' style={{ color: '#fff', fontSize: '12px' }}></Icon>
              </span>
            </div>
          </Popover>
        </div>
      </div>
      <div className='layout—breadcrumb-seting-bar-flex mt15'>
        <div className='layout-breadcrumb-seting-bar-flex-label'>{t('layout.setings.topbarfontcolor')}</div>
        <div className='layout-breadcrumb-seting-bar-flex-value'>
          <Popover
            placement='bottomRight'
            title={t('layout.setings.colorselector')}
            open={FontSizecolorclicked}
            onOpenChange={topBarFontSizecolorChange}
            content={
              <>
                <SketchPicker
                  color={topBarFontSizecolor}
                  onChange={(colorObj) => {
                    settopBarFontSizecolor(colorObj.hex);
                  }}
                />
                <div style={{ marginTop: '10px', display: 'flex', justifyContent: 'flex-end' }}>
                  <Button
                    size='small'
                    onClick={() => {
                      setFontSizecolorclicked(false);
                      Dispatch.stateSetThemeConfig('setthemeConfig', { topBarFontSizecolor: topBarFontSizecolor });
                    }}
                  >
                    {t('app.determine')}
                  </Button>
                </div>
              </>
            }
            trigger='click'
          >
            <div className='picker'>
              <span className='picker-color' style={{ background: topBarFontSizecolor }}>
                <Icon icon='DownOutlined' style={{ color: '#fff', fontSize: '12px' }}></Icon>
              </span>
            </div>
          </Popover>
        </div>
      </div>
      <div className='layout—breadcrumb-seting-bar-flex mt15'>
        <div className='layout-breadcrumb-seting-bar-flex-label'>{t('layout.setings.topheight')}（px）</div>
        <div className='layout-breadcrumb-seting-bar-flex-value'>
          <InputNumber
            size='small'
            style={{ width: '100px' }}
            addonAfter='px'
            defaultValue={ThemeConfig.topBarHight}
            value={ThemeConfig.topBarHight}
            onChange={(value: number | string | null) => {
              Dispatch.stateSetThemeConfig('setthemeConfig', { topBarHight: value });
            }}
          />
        </div>
      </div>

      {/* 菜单设置 */}
      <Divider orientation='left' plain>
        {t('layout.setings.menusettings')}
      </Divider>
      <div className='layout—breadcrumb-seting-bar-flex'>
        <div className='layout-breadcrumb-seting-bar-flex-label'>{t('layout.setings.menubackground')}</div>
        <div className='layout-breadcrumb-seting-bar-flex-value'>
          <Popover
            placement='bottomRight'
            title={t('layout.setings.colorselector')}
            open={menuBarclicked}
            onOpenChange={menuBarChange}
            content={
              <>
                <SketchPicker
                  color={menuBar}
                  onChange={(colorObj) => {
                    setmenuBar(colorObj.hex);
                  }}
                />
                <div style={{ marginTop: '10px', display: 'flex', justifyContent: 'flex-end' }}>
                  <Button
                    size='small'
                    onClick={() => {
                      menuBarChange(false);
                      Dispatch.stateSetThemeConfig('setthemeConfig', { menuBar: menuBar });
                    }}
                  >
                    {t('app.determine')}
                  </Button>
                </div>
              </>
            }
            trigger='click'
          >
            <div className='picker'>
              <span className='picker-color' style={{ background: menuBar }}>
                <Icon icon='DownOutlined' style={{ color: '#fff', fontSize: '12px' }}></Icon>
              </span>
            </div>
          </Popover>
        </div>
      </div>
      <div className='layout—breadcrumb-seting-bar-flex mt15'>
        <div className='layout-breadcrumb-seting-bar-flex-label'>{t('layout.setings.menudefaultfontcolor')}</div>
        <div className='layout-breadcrumb-seting-bar-flex-value'>
          <Popover
            placement='bottomRight'
            title={t('layout.setings.colorselector')}
            open={menuBarColorclicked}
            onOpenChange={menuBarColorChange}
            content={
              <>
                <SketchPicker
                  color={menuBarColor}
                  onChange={(colorObj) => {
                    setmenuBarColor(colorObj.hex);
                  }}
                />
                <div style={{ marginTop: '10px', display: 'flex', justifyContent: 'flex-end' }}>
                  <Button
                    size='small'
                    onClick={() => {
                      menuBarColorChange(false);
                      Dispatch.stateSetThemeConfig('setthemeConfig', { menuBarColor: menuBarColor });
                    }}
                  >
                    {t('app.determine')}
                  </Button>
                </div>
              </>
            }
            trigger='click'
          >
            <div className='picker'>
              <span className='picker-color' style={{ background: menuBarColor }}>
                <Icon icon='DownOutlined' style={{ color: '#fff', fontSize: '12px' }}></Icon>
              </span>
            </div>
          </Popover>
        </div>
      </div>
      <div className='layout—breadcrumb-seting-bar-flex mt15'>
        <div className='layout-breadcrumb-seting-bar-flex-label'>{t('layout.setings.menuwidth')}（px）</div>
        <div className='layout-breadcrumb-seting-bar-flex-value'>
          <InputNumber
            size='small'
            style={{ width: '100px' }}
            addonAfter='px'
            defaultValue={ThemeConfig.menuBarWidth}
            value={ThemeConfig.menuBarWidth}
            onChange={(value: number | string | null) => {
              Dispatch.stateSetThemeConfig('setthemeConfig', { menuBarWidth: value });
            }}
          />
        </div>
      </div>

      {/* 页面设置 */}
      <Divider orientation='left' plain>
        {t('layout.setings.pagesetup')}
      </Divider>
      <div className='layout—breadcrumb-seting-bar-flex'>
        <div className='layout-breadcrumb-seting-bar-flex-label'>{t('layout.setings.fixedheader')}</div>
        <div className='layout-breadcrumb-seting-bar-flex-value'>
          <Switch
            defaultChecked={ThemeConfig.IsfixedHead}
            size='small'
            onClick={(checked: boolean) => {
              Dispatch.stateSetThemeConfig('setthemeConfig', { IsfixedHead: checked });
            }}
          />
        </div>
      </div>

      {/* 页面显示 */}
      <Divider orientation='left' plain>
        {t('layout.setings.pagedisplay')}
      </Divider>
      <div className='layout—breadcrumb-seting-bar-flex'>
        <div className='layout-breadcrumb-seting-bar-flex-label'>{t('layout.setings.logoside')}</div>
        <div className='layout-breadcrumb-seting-bar-flex-value'>
          <Switch
            defaultChecked={ThemeConfig.IsLogo}
            size='small'
            onClick={(checked: boolean) => {
              Dispatch.stateSetThemeConfig('setthemeConfig', { IsLogo: checked });
            }}
          />
        </div>
      </div>
      <div className='layout—breadcrumb-seting-bar-flex mt15'>
        <div className='layout-breadcrumb-seting-bar-flex-label'>{t('layout.setings.openbreadcrumb')}</div>
        <div className='layout-breadcrumb-seting-bar-flex-value'>
          <Switch
            size='small'
            defaultChecked={ThemeConfig.IsCrumbs}
            onClick={(checked: boolean) => {
              Dispatch.stateSetThemeConfig('setthemeConfig', { IsCrumbs: checked });
            }}
          />
        </div>
      </div>
      <div className='layout—breadcrumb-seting-bar-flex mt15'>
        <div className='layout-breadcrumb-seting-bar-flex-label'>{t('layout.setings.openbreadcrumbicon')}</div>
        <div className='layout-breadcrumb-seting-bar-flex-value'>
          <Switch
            defaultChecked={ThemeConfig.IsCrumbsIcon}
            onClick={(checked: boolean) => {
              Dispatch.stateSetThemeConfig('setthemeConfig', { IsCrumbsIcon: checked });
            }}
            size='small'
          />
        </div>
      </div>
      <div className='layout—breadcrumb-seting-bar-flex mt15'>
        <div className='layout-breadcrumb-seting-bar-flex-label'>{t('layout.setings.opentagsview')}</div>
        <div className='layout-breadcrumb-seting-bar-flex-value'>
          <Switch
            defaultChecked={ThemeConfig.IsTagsView}
            onClick={(checked: boolean) => {
              Dispatch.stateSetThemeConfig('setthemeConfig', { IsTagsView: checked });
            }}
            size='small'
          />
        </div>
      </div>
      <div className='layout—breadcrumb-seting-bar-flex mt15'>
        <div className='layout-breadcrumb-seting-bar-flex-label'>{t('layout.setings.opentagviewicon')}</div>
        <div className='layout-breadcrumb-seting-bar-flex-value'>
          <Switch
            defaultChecked={ThemeConfig.IsTagsViewIcon}
            onClick={(checked: boolean) => {
              Dispatch.stateSetThemeConfig('setthemeConfig', { IsTagsViewIcon: checked });
            }}
            size='small'
          />
        </div>
      </div>
      <div className='layout—breadcrumb-seting-bar-flex mt15'>
        <div className='layout-breadcrumb-seting-bar-flex-label'>{t('layout.setings.openfooter')}</div>
        <div className='layout-breadcrumb-seting-bar-flex-value'>
          <Switch
            defaultChecked={ThemeConfig.IsFooter}
            onClick={(checked: boolean) => {
              Dispatch.stateSetThemeConfig('setthemeConfig', { IsFooter: checked });
            }}
            size='small'
          />
        </div>
      </div>

      <div className='layout—breadcrumb-seting-bar-flex mt15'>
        <div className='layout-breadcrumb-seting-bar-flex-label'>{t('layout.setings.turnonwatermark')}</div>
        <div className='layout-breadcrumb-seting-bar-flex-value'>
          <Switch
            defaultChecked={ThemeConfig.IsWatermark}
            onClick={(checked: boolean) => {
              Dispatch.stateSetThemeConfig('setthemeConfig', { IsWatermark: checked });
            }}
            size='small'
          />
        </div>
      </div>
      <div className='layout—breadcrumb-seting-bar-flex mt15'>
        <div className='layout-breadcrumb-seting-bar-flex-label'>{t('layout.setings.watermarkcopy')}</div>
        <div className='layout-breadcrumb-seting-bar-flex-value'>
          <Input
            size='small'
            value={ThemeConfig.WatermarkText}
            defaultValue={ThemeConfig.WatermarkText}
            onChange={(e) => {
              Dispatch.stateSetThemeConfig('setthemeConfig', { WatermarkText: e.target.value });
            }}
            style={{ width: '100px' }}
          />
        </div>
      </div>

      {/* 其他设置 */}
      <Divider orientation='left' plain>
        {t('layout.setings.othersettings')}
      </Divider>
      <div className='layout—breadcrumb-seting-bar-flex'>
        <div className='layout-breadcrumb-seting-bar-flex-label'> {t('layout.setings.tagsviewstyle')}</div>
        <div className='layout-breadcrumb-seting-bar-flex-value'>
          <Select
            defaultValue={t('layout.setings.styleone')}
            style={{ width: 100 }}
            size='small'
            options={[
              {
                value: '风格一',
                label: t('layout.setings.styleone'),
              },
              {
                value: '风格二',
                label: t('layout.setings.styletwo'),
              },

              {
                value: '风格三',
                label: t('layout.setings.stylethree'),
              },
            ]}
          />
        </div>
      </div>
      <div className='layout—breadcrumb-seting-bar-flex mt15'>
        <div className='layout-breadcrumb-seting-bar-flex-label'>{t('layout.setings.animation')}</div>
        <div className='layout-breadcrumb-seting-bar-flex-value'>
          <Select
            defaultValue='slide-right'
            size='small'
            style={{ width: 100 }}
            options={[
              {
                value: 'slide-right',
                label: 'slide-right',
              },
              {
                value: 'slide-left',
                label: 'slide-left',
              },

              {
                value: 'opacitys',
                label: 'opacitys',
              },
            ]}
          />
        </div>
      </div>

      {/* 布局切换 */}
      <Divider orientation='left' plain>
        {t('layout.setings.layout')}
      </Divider>
      <div className='layout-drawer-content-flex'>
        <div className='layout-drawer-content-item' onClick={() => LayoutSwitch('default')}>
          <Layout className={classnames({ action: ThemeConfig.layout === 'default' }, 'circular')}>
            <Sider width='20'></Sider>
            <Layout>
              <Header></Header>
              <Content></Content>
            </Layout>
          </Layout>
          <div className='layout-tips-warp'>
            <div className='layout-tips-box'>
              <p className={classnames({ action: ThemeConfig.layout === 'default' }, 'layout-tips-txt')}>
                {t('layout.setings.default')}
              </p>
            </div>
          </div>
        </div>
        <div className='layout-drawer-content-item' onClick={() => LayoutSwitch('circular')}>
          <Layout className={classnames({ action: ThemeConfig.layout === 'circular' }, 'circular')}>
            <Header></Header>
            <Layout>
              <Sider width='20'></Sider>
              <Content></Content>
            </Layout>
          </Layout>
          <div className='layout-tips-warp'>
            <div className='layout-tips-box'>
              <p className={classnames({ action: ThemeConfig.layout === 'circular' }, 'layout-tips-txt')}>
                {t('layout.setings.circular')}
              </p>
            </div>
          </div>
        </div>
        <div className='layout-drawer-content-item' onClick={() => LayoutSwitch('blend')}>
          <Layout className={classnames({ action: ThemeConfig.layout === 'blend' }, 'circular')}>
            <Header></Header>
            <Layout>
              <Content></Content>
              <Sider width='20'></Sider>
            </Layout>
          </Layout>
          <div className='layout-tips-warp'>
            <div className='layout-tips-box'>
              <p className={classnames({ action: ThemeConfig.layout === 'blend' }, 'layout-tips-txt')}>
                {t('layout.setings.blend')}
              </p>
            </div>
          </div>
        </div>
        <div className='layout-drawer-content-item' onClick={() => LayoutSwitch('transverse')}>
          <Layout className={classnames({ action: ThemeConfig.layout === 'transverse' }, 'circular')}>
            <Header></Header>
            <Content></Content>
          </Layout>
          <div className='layout-tips-warp'>
            <div className='layout-tips-box'>
              <p className={classnames({ action: ThemeConfig.layout === 'transverse' }, 'layout-tips-txt')}>
                {t('layout.setings.transverse')}
              </p>
            </div>
          </div>
        </div>
      </div>
      <Alert
        message={t('layout.setings.text')}
        type='warning'
        showIcon
        icon={<Icon icon='NotificationOutlined' style={{ fontSize: '20px' }}></Icon>}
      />
      <Button
        type='primary'
        icon={<Icon icon='CopyOutlined'></Icon>}
        style={{ width: '100%', marginTop: '10px' }}
        onClick={onCopyConfigClick}
      >
        {t('layout.setings.configuration')}
      </Button>
      <Button
        icon={<Icon icon='icon-shuaxin'></Icon>}
        style={{ width: '100%', margin: '10px 0', background: '#73767a', color: '#fff' }}
        onClick={onResetConfigClick}
      >
        {t('layout.setings.restoredefault')}
      </Button>
    </div>
  );
}
